<template>
	<view class="info-hobby" :style="'height:'+ screenHeight +'px !important;'">
		<view class="info-hobby-list">
			<view class="info-hobby-list-left">
				个人爱好
			</view>
			<view class="info-hobby-list-right" >
				<picker @change="xqPickerChange" :value="index" :range="array">
					<view class="education-tips" v-show="xqDisplay">
						<text style="color: #9BA8B7;" >请选择</text>
						<uni-icons type="arrowdown" size="15" color="#9BA8B7"></uni-icons>
					</view>
					<view class="uni-input" v-show="!xqDisplay">{{array[index]}}</view>
				</picker>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" >
			<view class="popup">
				<view class="popup-btn">
					<view class="cancel" @tap="popupCancel">取消</view>
					<view class="confirm" @tap="popupConfirm">确定</view>
				</view>
				<view class="custom-hobby" v-show="customDisplay">
					<view class="popuptitle">
						自定义：个人兴趣爱好
					</view>
					<view class="popupEnter">
						<input type="text" value="" @input="enterHobby" placeholder="请输入个人兴趣爱好...." placeholder-style="color:#9BA8B7"/>
					</view>
				</view>
				<view class="hobby-explain">
					<view class="popuptitle">
						爱好描述
					</view>
					<view class="popupEnter">
						 <textarea placeholder-style="color:#9BA8B7" value="" @input="enterExplain" placeholder="请在这里添加兴趣爱好说明..."/>
					</view>
				</view>
			</view>
		</uni-popup>
		<view class="hobby-item">
			<view class="hobbys-title">
				<uni-icons type="heart-filled" size="10" color="#0291ff"></uni-icons>
				<text>爱好 1</text>
			</view>
			<view class="hobbys-content">
				<view class="hobbys-left">
					<view class="hobbys">跑步</view>
					<view class="hobbys-explain">那边v的韩国的生存机会成本定价的角度看</view>
				</view>
				<view class="hobbys-right">
					<uni-icons type="compose" size="20" color="#00aaff" class="hobbys-editor"></uni-icons>
					<uni-icons type="closeempty" size="20" color="#ff0000" class="hobbys-cancel"></uni-icons>
				</view>
			</view>
		</view>
		<view class="hobby-item">
			<view class="hobbys-title">
				<uni-icons type="heart-filled" size="10" color="#0291ff"></uni-icons>
				<text>爱好 1</text>
			</view>
			<view class="hobbys-content">
				<view class="hobbys-left">
					<view class="hobbys">跑步</view>
					<view class="hobbys-explain">那边v的韩国的生存机会成本定价的角度看</view>
				</view>
				<view class="hobbys-right">
					<uni-icons type="compose" size="20" color="#00aaff" class="hobbys-editor"></uni-icons>
					<uni-icons type="closeempty" size="20" color="#ff0000" class="hobbys-cancel"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	export default {
		components: {uniCollapse,uniCollapseItem},
		data() {
			return {
				xqDisplay:true,
				customDisplay:false,
				screenHeight: '',
				index: 0,
				array: ['跑步','绘画', '看剧', '摄影', '唱歌','自定义'],
			}
		},
		onLoad() {
		    this.screenHeight = uni.getSystemInfoSync().windowHeight;
		},
		methods: {
			xqPickerChange(e){
				var ind=e.target.value;
				this.index=ind;
				if(ind==this.array.length-1){
					this.customDisplay=true;
				}else{
					this.customDisplay=false;
				}
				this.xqDisplay=false;
				this.$refs.popup.open();
			},
			popupCancel(e){
				this.$refs.popup.close();
			},
			popupConfirm(e){
				this.$refs.popup.close();
			},
			back(){
				uni.navigateTo({
					url:"./user/info"
				})
			},
		}
	}
</script>

<style scoped lang="less">
	@import url("../../../static/color.less");
	.info-hobby{
		width: 100%;
		height: 100%;
		background-color: @colorLightGray;
	}
	.info-hobby-list{
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		padding: 25rpx;
	}
	.popup{
		background-color: @colorLightGray;
	}
	.popup-btn{
		padding: 25rpx;
		display: flex;
		justify-content: space-between;
		background-color: #f5f5f5;
	}
	.cancel{
		font-size: 35rpx;
		color: #aaaaaa;
	}
	.confirm{
		font-size: 35rpx;
		color: #1676FE;
	}
	.popuptitle{
		font-size: 35rpx;
		padding: 15rpx 30rpx;	
	}
	.popupEnter{
		font-size: 35rpx;
		background-color: #FFFFFF;
		border-radius: 25rpx;
	}
	.popupEnter input{
		padding: 15rpx;
	}
	.popupEnter textarea{
		padding: 15rpx;
	}
	.hobby-item{
		background-color: #FFFFFF;
		margin: 20rpx;
		border-radius: 20rpx;
	}
	.hobbys-title{
		font-weight: bolder;
		padding: 10rpx 25rpx;
	}
	.hobbys-content{
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		align-items: center;
	}
	.hobby-btn{
		background-color: @colorLightGray;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
	}
	
	
</style>
